<template>
  <div class="container-tourist">
    <div class="top">
      <p class="title">实时游客统计</p>
      <span class="deco"></span>
      <span class="num"
        >可预约总量<span style="color: greenyellow">99999</span>人</span
      >
    </div>
    <div class="body">
      <span v-for="item in numList" class="number">{{ item }}</span>
    </div>
    <div class="liquid" ref="liquid" style="width: 100%; height: 280px"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-liquidfill";
const numList = ["2", "1", "6", "9", "0", "8", "人"];
let liquid = ref();
onMounted(() => {
  // console.log(echarts);
  let mychart = echarts.init(liquid.value);
  mychart.setOption({
    title: {
      text: "",
      left: "center",
    },

    series: {
      type: "liquidFill",
      name: "预约量",
      data: [0.5, 0.5, 0.5],
      color: ["#296eeb", "#296eeb", "#296eeb"],
      radius: "70%",
      itemStyle: {
        opacity: 0.6,
      },
      emphasis: {
        itemStyle: {
          opacity: 0.9,
        },
      },
      outline: {
        show: true,
        borderDistance: 5,
        itemStyle: {
          borderColor: "#2d74f4",
          borderWidth: 8,
        },
      },
      label: {
        formatter: function (param: any) {
          return (
            param.seriesName +
            "\n" +
            param.name +
            "\n" +
            param.value * 100 +
            "%"
          );
        },
        fontSize: 14,
        baseline: "bottom",
        position: ["50%", "35%"],
      },
      tooltip: {
        show: true,
      },
    },
  });
});
</script>

<style lang="scss" scoped>
.container-tourist {
  margin: 10px 0px 0px 20px;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  // border: 1px solid cadetblue;
  .top {
    position: relative;
    // border: 1px solid red;
    height: 66px;
    .title {
      color: white;
      font-size: 20px;
    }
    .deco {
      background: url(../../images/dataScreen-title.png);
      display: inline-block;
      width: 68px;
      height: 7px;
    }
    .num {
      color: white;
      font-size: 14px;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
  .body {
    color: white;
    display: flex;
    justify-content: center;
    .number {
      text-align: center;
      height: 45px;
      line-height: 45px;
      width: 45px;
      margin: 10px 2px 0 0;
      background: url(../../images/total.png);
      background-size: 100% 100%;
    }
  }
}
</style>
